<script lang="ts" setup>
import PageTable from "@/components/PageTable/index.vue";
import SearchHeader from "@/components/SearchHeader/index.vue";
import PageContainer from "@/components/PageContainer/index.vue";
import {reactive, ref} from "vue";
import { View,CirclePlusFilled,Edit,Remove } from '@element-plus/icons-vue'
import ProjectDialog from "@/views/project/components/ProjectDialog.vue";
import {ButtonColor} from "@/utils/buttonsColor";
import { ElMessageBox } from 'element-plus'
import { message } from "@/utils/message";
import {delProject, projectList} from "@/api/demoApi";

defineOptions({
  name: "project"
});

/**-------------------搜索-------------------**/
//查询参数
const queryList = [
  {key:'projectNo',label:'项目编号',type:'input'},
  {key:'projectName',label:'项目名称',type:'input'},
]
//分页
const pageQuery = reactive({
  page:1,
  size:15
})
//查询回调
const searchHandler = (queryForm)=>{
  console.log(queryForm)
}
//分页回调
const paginationHandler = (pageInfo) =>{
  pageQuery.page = pageInfo.page
  pageQuery.size = pageInfo.size
}

/**-------------------列表-------------------**/
//总条数
const total = ref(0)
//表格列
const tableColumns = [
  {label:'项目编号',key:'projectNo'},
  {label:'项目名称',key:'projectName'},
  {label:'所属业主',key:'ownerName'},
  {label:'创建时间',key:'createTime'},
  {label:'站点数量',key:'stationCount'},
  {label:'操作',key:'operation',custom:true,width: 250}
]
//表格行数据
const tableData = ref([])
const getTableData = ()=>{
  tableData.value = projectList()
}
getTableData()

/**-------------------操作-------------------**/
//弹窗
const projectDialog = ref()
const openDialog = (type:string,row:object)=>{
  switch (type){
    case 'add':
      projectDialog.value.dialogShow('添加项目')
      break
    case 'edit':
      projectDialog.value.dialogShow('编辑项目',row)
      break
  }
}
//删除
const delHandler = async id =>{
  try{
    await ElMessageBox.confirm('确认要删除该项目吗？', '提示',
      {
        confirmButtonText: '确认',
        cancelButtonText: '取消',
        type: 'warning',
      }
    )
    //todo 删除接口
    delProject(id)
    message('删除成功',{type:'success'})
    getTableData()
  }catch(err){

  }
}
//未完成提示
const notDone = ()=>{
  message('抱歉，功能设计中...',{type:'warning'})
}
</script>

<template>
  <PageContainer>
    <!--顶部筛选-->
    <SearchHeader :query-list="queryList" @search="searchHandler">
      <template #button>
        <el-button :color="ButtonColor.ADD" :icon="CirclePlusFilled" @click="openDialog('add',null)">添加</el-button>
      </template>
    </SearchHeader>
    <!--    表格-->
    <PageTable :columns="tableColumns" :page="pageQuery.page" :size="pageQuery.size" :table-data="tableData" :total="total" @pagination="paginationHandler">
      <template #operation="{row}">
        <el-button :color="ButtonColor.VIEW" :icon="View" plain round size="small" @click="notDone">查看</el-button>
        <el-button :color="ButtonColor.EDIT" :icon="Edit" plain round size="small" @click="openDialog('edit',row)">编辑</el-button>
        <el-button :color="ButtonColor.DEL" :icon="Remove" plain round size="small" @click="delHandler(row.id)">删除</el-button>
      </template>
    </PageTable>

    <!--  弹窗-->
    <ProjectDialog ref="projectDialog" @done="getTableData" />
  </PageContainer>
</template>

<style lang="scss" scoped>

</style>
